<template>
    <a-drawer title="巡检记录" width="31%" destroyOnClose :visible.sync="visible" direction="rtl" @close="() => {
        this.visible = false
    }">
        <!-- 巡检记录 -->
        <a-empty v-if="RecordingList.length == 0" description="当前任务暂无巡检记录~"></a-empty>
        <div v-for="(aItem, aIndex) in RecordingList" :key="aIndex">
            <div class="taskName">{{ aItem.Name }}</div>
            <div class="one" v-for="(item, index) in aItem.TakeNotesList" :key="index">
                <div class="head">
                    <img class="man" :src="item.UserIcon" alt="" />
                    <div class="textbox">
                        <h3>
                            {{ item.CreatorRealName }}
                        </h3>
                        <p>
                            {{ item.CreateTime.split(" ")[0] }}
                        </p>
                    </div>
                </div>
                <div class="contents">
                    <div class="cone">
                        <p v-for="(val, vix) in item.PropData" :key="vix">
                            {{ val.ControlName }}:
                            {{ val.DefaultValue }}
                        </p>
                    </div>
                    <p style="margin-top: 10px">描述： {{ item.Content }}</p>
                </div>
                <div class="tu">
                    <img class="tuimg" v-for="img in item.MediumList" :key="img.url" :src="img.Murl" :preview-src-list="imgList"
                        fit="contain" />
                </div>
            </div>
        </div>
    </a-drawer>
</template>
  
<script>
export default {
    components: {
  },
    props: {
        pId: { require: true },
    },
    data() {
        return {
            visible: false,
            RecordingList: [],
            imgList: [],
            rwId:'',
        };
    },
    methods: {
        openForm(id) {
            this.visible = true;
            this.$http
                .post("/Base_ProjectWork/Base_Project/GetProjectTakeJsonData", {
                    PageIndex: 1,
                    PageRows: 1,
                    SortField: "CreateTime",
                    SortType: "desc",
                    Search: {
                        ProjectId: this.pId,
                        TaskId: this.rwId,
                    },
                })
                .then((res) => {
                    if (res.Success) {
                        this.RecordingList = res.Data;
                        this.imgList = res.ListDetail.map((item) => item.Murl);
                        this.rwId=this.RecordingList[0].Id;
                        console.log(this.rwId);
                    } else {
                        this.RecordingList = [];
                        this.imgList = [];
                    }
                });
        },
    },
};
</script>
  
<style lang="less">
.taskName {
    color: #336dba;
    font-weight: bold;
    font-size: 20px;
    padding-left: 12px;
    line-height: 2;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}

.one {
    padding: 12px;
    padding-top: 0;

    .head {
        width: 100%;
        display: flex;
        align-items: center;

        .man {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .textbox {
            width: 85%;
            // margin-top: -52px;
            // margin-left: 13%;
            // background-color: red;
            display: flex;
            justify-content: space-between;
        }
    }

    .contents {
        width: 100%;
        padding-left: 44px;
        box-sizing: border-box;

        .cone {
            display: flex;
            flex-wrap: wrap;

            p {
                width: 50%;
                margin: 5px 0;
            }
        }
    }

    .tu {
        width: 100%;
        padding-left: 44px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;

        .tuimg {
            width: 120px;
            height: 120px;
            margin-right: 10px;
            border: 1px solid #ccc;
            padding: 5px;
            box-sizing: border-box;
            border-radius: 5px;
        }
    }
}
</style>